<template>
  <div @resize="handleResize">
    <el-row :gutter="24">
      <el-col san="24" class="ivu-mb">
        <el-card :bordered="false" shadow="never" class="dashboard-console-visit">
          <div>
            <el-row justify="center" align="middle">
              <el-col :span="8" class="card-title">
                <el-avatar
                  icon="el-icon-s-marketing"
                  size="small"
                  style="color: #1890ff; background-color: #e6f7ff"
                ></el-avatar>
                <h4 class="ivu-pl-8">项目</h4>
              </el-col>
              <el-col :span="16" class="ivu-text-right">
                <el-radio-group v-model="visitDate" type="button" class="ivu-mr-8" @change="handleChangeVisitType">
                  <el-radio-button label="thirtyday">30天</el-radio-button>
                  <el-radio-button label="week">周</el-radio-button>
                  <el-radio-button label="month">月</el-radio-button>
                  <el-radio-button label="year">年</el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
          <div id="main" style="width: 100%;height: 430px;margin-top: 10px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import {getProjectLineData} from "@/pages/index/index.js";
const visitDate = ref('thirtyday');
const optionData = ref({dateList: [], projectList: [], totalList: [], ratioList: []});
const option = ref({
  tooltip: {
    padding: 8,
  },
  legend: {
    data: ['新增', '累计', '比例'],
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 14,
    center: ['50%', '50%'],
    textStyle: {
      fontSize: 14,

    }
  },
  xAxis: [
    {
      type: 'category',
      data: optionData.value.dateList,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        textStyle: {
          // color: '#F5F5F5',  //更改坐标轴文字颜色
          fontSize: 12     //更改坐标轴文字大小
        }
      },
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '数量',
      axisLabel: {
        textStyle: {
          // color: '#F5F5F5',  //更改坐标轴文字颜色
          fontSize: 12     //更改坐标轴文字大小
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          // color: '#979797',
          type: [5, 10],
        },
      },
    },

    // 折线部分
    {
      type: 'value',
      name: '占比',
      axisLabel: {
        textStyle: {
          // color: '#F5F5F5',  //更改坐标轴文字颜色
          fontSize: 12     //更改坐标轴文字大小
        },
        formatter: '{value} %'
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '新增',
      type: 'bar',
      itemStyle: {
        opacity: 1, // 这个是 透明度
        color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: 'rgba(219, 179, 110, 0)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(219, 179, 110, 1)' // 100% 处的颜色
              }
            ],
            false
        )
      },
      // 实现数字展示在柱状图
      label: {
        show: true,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}' //添加单位
      },
      data: optionData.value.projectList
    },
    {
      name: '累计',
      type: 'bar',
      itemStyle: {
        // lenged文本
        opacity: 1, // 这个是 透明度
        color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: 'rgba(51, 204, 204, 0)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(51, 204, 204, 1)' // 100% 处的颜色
              }
            ],
            false
        )
      },
      label: {
        show: true,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}' //添加单位
      },
      data: optionData.value.totalList
    },

    // 折线部分
    {
      name: '比例',
      type: 'line',
      yAxisIndex: 1,
      symbol: 'circle',
      symbolSize: 10,
      itemStyle: {
        // shadowColor: '#fff',
        shadowBlur: 5,
        color: '#1EC5EA'
      },
      label: {
        show: true,
        position: 'top',
        // color: '#F5F5F5',
        formatter: '{c} %'
      },
      data: optionData.value.ratioList
    }
  ]
});
const init = () => {
  const chart = echarts.init(document.getElementById('main'));
  if (chart){
    chart.setOption(option.value);
    window.onresize = chart.resize;
  }
}
// 切换时间类型
const handleChangeVisitType = async () => {
  await getProjectLineData(visitDate.value).then((res) => {
    optionData.value = res.data;
    option.value.xAxis[0].data = res.data.dateList;
    option.value.series[0].data = res.data.projectList;
    option.value.series[1].data = res.data.totalList;
    option.value.series[2].data = res.data.ratioList;
    init();
  })
}
// 使用 watch 监听 optionData 的变化，并在变化时更新图表
watch(optionData, () => {
  init();
});
onMounted(() => {
  handleChangeVisitType();
  init();
})


</script>
<style lang="scss" scoped>
.dashboard-console-visit {
  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}
.ivu-text-right {
  text-align: right;
}
.ivu-pl-8 {
  padding-left: 8px !important;
}
.card-title {
  display: flex;
  align-items: center;
}
</style>
